<template>
    <div class="wait-list">
        <div class="btn">
            <el-button @click="updateStatus"
                :style="{ 'background': status === true ? '#004FEE' : '#fff', 'color': status === true ? '#fff' : '#333' }">确认收货单</el-button>
            <el-button v-if="isShow" @click="handleReturn"
                :style="{ 'background': returnStatus === true ? '#004FEE' : '#fff', 'color': returnStatus === true ? '#fff' : '#333' }">申请退货</el-button>
            <el-button v-if="isShow" @click="handleExchange"
                :style="{ 'background': exchangeStatus === true ? '#004FEE' : '#fff', 'color': exchangeStatus === true ? '#fff' : '#333' }">申请换货</el-button>
            <el-button v-if="isShow" @click="handleRepair"
                :style="{ 'background': repairStatus === true ? '#004FEE' : '#fff', 'color': repairStatus === true ? '#fff' : '#333' }">申请补货</el-button>
        </div>
        <el-table :data="tableData" style="width: 100%" :height="500" ref="table"
            :header-cell-style="{ background: '#eee', color: '#000' }" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55"> </el-table-column>
            <el-table-column prop="waybillNo" label="运单号" width="150">
                <template slot-scope="scope">
                    <div style="color:#004FEE;">{{ scope.row.waybillNo }}</div>
                </template>
            </el-table-column>
            <el-table-column prop="status" label="状态" width="150">
                <template slot-scope="scope">
                    <div v-if="scope.row.status == '待收货'">
                        <div
                            style="width:8px;height:8px;background:#FFA900;margin-right:5px;border-radius: 50%;display:inline-block;">
                        </div>{{ scope.row.status }}
                    </div>
                    <div v-else-if="scope.row.status == '已收货'">
                        <div
                            style="width:8px;height:8px;background:#32B457;margin-right:5px;border-radius: 50%;display:inline-block;">
                        </div>{{ scope.row.status }}
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="model" label="型号" width="150"> </el-table-column>
            <el-table-column prop="brand" label="品牌" width="150"> </el-table-column>
            <el-table-column prop="number" label="数量" width="150">
            </el-table-column>
            <el-table-column prop="batch" label="批次" width="150"> </el-table-column>
            <el-table-column prop="package" label="封装" width="150">
            </el-table-column>
            <el-table-column prop="currency" label="币种" width="150">
            </el-table-column>
            <el-table-column prop="price" label="单价" width="150">
                <template slot-scope="scope">
                    <div style="color: #009D2C;">{{ scope.row.price }}</div>
                </template>
            </el-table-column>
            <el-table-column prop="money" label="订单金额" width="150">
                <template slot-scope="scope">
                    <div style="color:#FF7600;">{{ scope.row.money }}</div>
                </template>
            </el-table-column>
            <el-table-column prop="address" label="交货地" width="150">
            </el-table-column>
            <el-table-column prop="MPQ" label="MPQ" width="150"> </el-table-column>
            <el-table-column prop="packing" label="包装" width="150">
            </el-table-column>
            <el-table-column prop="id" label="订单项" width="150"> </el-table-column>
            <el-table-column prop="desc" label="备注" width="150"> </el-table-column>
        </el-table>
        <el-pagination class="pagination" layout="total,sizes,prev, pager, next,jumper" :total="50">
        </el-pagination>
        <!-- 申请退货 -->
        <ReturnDrawer :return-drawer="returnDrawer" @close="returnClose" />
        <!-- 申请换货 -->
        <ExchangeDrawer :exchange-drawer="exchangeDrawer" @close="exchangeClose" />
        <!-- 申请补货 -->
        <RepairDrawer :repair-drawer="repairDrawer" @close="repairClose" />
    </div>
</template>

<script>
import ReturnDrawer from "./returnDrawer.vue"
import ExchangeDrawer from "./exchangeDrawer.vue";
import RepairDrawer from './repairDrawer.vue';
export default {
    name: 'waitList',
    data() {
        return {
            status: false,
            returnStatus:false,
            exchangeStatus:false,
            repairStatus:false,
            isShow: false,
            returnDrawer: false,
            exchangeDrawer: false,
            repairDrawer: false,
            tableData: [
                {
                    waybillNo: "SF22020000295",
                    status: "待收货",
                    model: "H1",
                    brand: "KEMET",
                    number: "100",
                    batch: "1",
                    package: "XXXW95",
                    currency: "人民币",
                    price: "10",
                    money: "10000",
                    address: "国内",
                    MPQ: "1",
                    packing: "散装",
                    id: "DD2202000295-001",
                    desc: "",
                },
                {
                    waybillNo: "SF22020000295",
                    status: "待收货",
                    model: "H1",
                    brand: "KEMET",
                    number: "100",
                    batch: "1",
                    package: "XXXW95",
                    currency: "人民币",
                    price: "10",
                    money: "10000",
                    address: "国内",
                    MPQ: "1",
                    packing: "散装",
                    id: "DD2202000295-001",
                    desc: "",
                },
                {
                    waybillNo: "SF22020000295",
                    status: "待收货",
                    model: "H1",
                    brand: "KEMET",
                    number: "100",
                    batch: "1",
                    package: "XXXW95",
                    currency: "人民币",
                    price: "10",
                    money: "10000",
                    address: "国内",
                    MPQ: "1",
                    packing: "散装",
                    id: "DD2202000295-001",
                    desc: "",
                },
            ],
            multipleSelection: []
        }
    },
    components: {
        ReturnDrawer,
        ExchangeDrawer,
        RepairDrawer
    },
    methods: {
        returnClose() {
            this.returnDrawer = false;
            this.status = false;
            this.$refs.table.clearSelection();
        },
        exchangeClose() {
            this.exchangeDrawer = false;
            this.status = false;
            this.$refs.table.clearSelection();
        },
        repairClose() {
            this.repairDrawer = false;
            this.status = false;
            this.$refs.table.clearSelection();
        },
        updateStatus() {
            if (this.multipleSelection.length > 0) {
                this.tableData.map((item) => {
                    if (item.status == "待收货") {
                        Object.assign(item, { status: "已收货" });
                        this.isShow = true
                        return item;
                    }
                });
                this.status = false;
                this.$refs.table.clearSelection();
            } else {
                this.$message.error('请选择数据进行操作');
            }

        },
        // 申请退货
        handleReturn() {
            console.log('tag', this.multipleSelection)
            if(this.multipleSelection.length == 0){
                this.$message.error('请选择数据进行操作');
            }else if (this.multipleSelection.length < 2) {
                this.returnDrawer = true;
            }  
        },
        // 申请换货
        handleExchange() {
            if (this.multipleSelection.length == 0) {
                this.$message.error('请选择数据进行操作');
            } else if(this.multipleSelection.length < 2) {
                this.exchangeDrawer = true;
            }
        },
        // 申请补货
        handleRepair() {
            if (this.multipleSelection.length == 0) {
                this.$message.error('请选择数据进行操作');
            } else if(this.multipleSelection.length < 2) {
                this.repairDrawer = true;
            }
        },
        // 选中表格
        handleSelectionChange(val) {
            console.log('val', val)
            
            if (val.length > 0) {
                this.multipleSelection = val
                val.map(item => {
                    if (item.status == "待收货") {
                        this.status = true;
                        this.multipleSelection = val
                    } else if (item.status == "部分收货" || item.status == "已收货") {
                        // if (this.multipleSelection.length < 2) {
                            this.returnStatus = true;
                            this.exchangeStatus = true;
                            this.repairStatus = true;
                        // }
                    }
                })
            } else {
                this.multipleSelection = val
                this.status = false;
                this.returnStatus = false;
                this.exchangeStatus = false;
                this.repairStatus = false;
            }
        },
    }
}
</script>

<style scoped lang="scss">
.wait-list {
    .pagination {
        margin-top: 10px;
        text-align: right;
    }

    .btn {
        margin-bottom: 16px;
    }
}
</style>